<template>
  <el-dropdown id="notification-dropdown">
    <router-link :to="`/${$rp.NOTIFICATIONS}`" target="_blank" class="flex self-btn icon-btn">
      <el-badge :value="unreadCount" :max="99" :hidden="unreadCount === 0"
                class="flex align-items-center">
        <i class="el-icon-bell" style="font-size: 22px; font-weight: 700"></i>
      </el-badge>
    </router-link>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item class="a-link-item-self">
        <router-link :to="linkPath.comments" target="_blank">
          <span>回复我的</span>
          <el-badge :value="unreadCommentsCount" :max="99" :hidden="unreadCommentsCount === 0"/>
        </router-link>
      </el-dropdown-item>
      <el-dropdown-item class="a-link-item-self">
        <router-link :to="linkPath.votes" target="_blank">
          <span>收到的赞</span>
          <el-badge :value="unreadVotesCount" :max="99" :hidden="unreadVotesCount === 0"/>
        </router-link>
      </el-dropdown-item>
      <el-dropdown-item class="a-link-item-self">
        <router-link :to="linkPath.annc" target="_blank">
          <span>群组公告</span>
          <el-badge :value="unreadAnncCount" :max="99" :hidden="unreadAnncCount === 0"/>
        </router-link>
      </el-dropdown-item>
      <el-dropdown-item class="a-link-item-self">
        <router-link :to="linkPath.other" target="_blank">
          <span>系统通知</span>
          <el-badge :value="unreadOtherCount" :max="99" :hidden="unreadOtherCount === 0"/>
        </router-link>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'HeaderNotifications', // 页头的消息提醒下拉菜单
  computed: {
    ...mapState([
      'unreadCommentsCount',
      'unreadVotesCount',
      'unreadAnncCount',
      'unreadOtherCount',
    ]),
    unreadCount() {
      return this.unreadCommentsCount
        + this.unreadVotesCount
        + this.unreadOtherCount
        + this.unreadAnncCount;
    },
    linkPath() {
      return {
        comments: `/${this.$rp.NOTIFICATIONS}?type=${this.$C.notifications.type.comments}`,
        votes: `/${this.$rp.NOTIFICATIONS}?type=${this.$C.notifications.type.votes}`,
        annc: `/${this.$rp.NOTIFICATIONS}?type=${this.$C.notifications.type.annc}`,
        other: `/${this.$rp.NOTIFICATIONS}?type=${this.$C.notifications.type.other}`,
      };
    },
  },
  methods: {
    ...mapActions([
      'setUnreadCommentsCount',
      'setUnreadVotesCount',
      'setUnreadAnncCount',
      'setUnreadOtherCount',
    ]),
    // 加载未读数量
    loadUnreadCount(obj) {
      this.$api.notifications.count()
        .then((res) => {
          this.setUnreadCommentsCount(res.data.CommentMsg);
          this.setUnreadVotesCount(res.data.VoteMsg);
          this.setUnreadAnncCount(res.data.NoticeMsg);
          this.setUnreadOtherCount(res.data.OtherMsg);
          if (obj.box && this.$route.path !== '/notifications') this.boxRemind();
        }).catch(() => {});
    },
    // 弹出框提醒
    boxRemind() {
      if (this.unreadCount > 0) {
        const notesPath = `/${this.$rp.NOTIFICATIONS}`;
        this.$notify.info({
          title: '消息',
          message: '你有新的未读消息，点击查看',
          customClass: 'pointer',
          onClick: () => this.$root.$emit('routerPush', { path: notesPath }),
        });
      }
    },
  },
  created() { this.loadUnreadCount({ box: true }); },
  mounted() {
    this.$root.$on('updateUnreadCount', this.loadUnreadCount);
  },
};
</script>

<style></style>
